<template>
  <div class="divMain1">
    <!-- 模糊查询 -->
    <div class="mainTop1">
      <el-form :v-model="queryOperation">
        <div class="divInputAll1">
          <!-- 输入框 -->
          <div class="divInput1">
            <div class="inputFont1">设备名称：</div>
            <div style="float: left">
              <el-input
                size="mini"
                placeholder="请输入内容"
                v-model="queryOperation.equipmentName"
              >
              </el-input>
            </div>
          </div>
          <div class="divInput1">
            <div class="inputFont1">设备编号：</div>
            <div style="float: left">
              <el-input
                size="mini"
                placeholder="请输入内容"
                v-model="queryOperation.equipmentNum"
              >
              </el-input>
            </div>
          </div>
          <div class="divSelect1">
            <div class="inputFont1">维修类型：</div>
            <div style="float: left">
              <el-select
                size="mini"
                v-model="queryOperation.repairTypeId"
                placeholder="请选择"
                reserve-keyword="true"
              >
                <el-option
                  v-for="item in repairTypes"
                  :key="item.repairTypeId"
                  :label="item.repairTypeName"
                  :value="item.repairTypeId"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="likeBtn1">
            <el-button
              size="mini"
              type="success"
              icon="el-icon-search"
              @click="newLoadOperation"
              >查询</el-button
            >
            <el-button size="mini" plain @click="reLoadOperation"
              >重置</el-button
            >
          </div>
        </div>
      </el-form>
    </div>

    <!-- 查所有 -->
    <div class="divSelAll1">
      <el-table
        ref="multipleTable"
        :data="operationList"
        border
        style="width: 100%; font-size: xx-small; margin: auto"
        :row-style="{ height: '22px' }"
        :cell-style="{ padding: '1px' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" prop="operationId" width="46">
        </el-table-column>
        <el-table-column prop="equipmentName" label="设备名称" width="120">
        </el-table-column>
        <el-table-column prop="equipmentNum" label="设备编号" width="100">
        </el-table-column>
        <el-table-column prop="equipmentPlace" label="巡检位置" width="140">
        </el-table-column>
        <el-table-column prop="warningName" label="巡检内容" width="190">
        </el-table-column>
        <el-table-column prop="repairTypeName" label="维修类型" width="90">
        </el-table-column>
        <el-table-column
          prop="operationStatus"
          :formatter="statesFormat"
          label="巡检状态"
          width="100"
        >
        </el-table-column>
        <el-table-column prop="operationTime" label="巡检时间" width="110">
        </el-table-column>

        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row.operationId)"
              type="text"
              size="small"
              >详情</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.row.operationId)"
              >删除</el-button
            >

            <el-button
              type="text"
              size="small"
              v-if="scope.row.operationStatus != 3"
              @click="handleTask(scope.row.operationId)"
              >处理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
          <!-- 详情模态框 -->
          <el-dialog
        :visible.sync="dialogShow"
        @close="closeDialogShow"
        fullscreen="true"
      >
        <div class="allDialog">
          <div class="eLeft">
            <div class="title1">告警处理分配：</div>
            <div class="mesl">
              <div class="mesl2">
                <el-form
                  ref="operationForm"
                  :rules="rules"
                  label-width="80px"
                  size="mini"
                >
                <el-form-item label="运维ID" hidden prop="operationId">
                    <el-input
                      v-model="operationForm.operationId"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="告警ID" hidden prop="warningId">
                    <el-input
                      v-model="operationForm.warningId"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="设备名称"
                    style="width: 280px"
                    prop="equipmentName"
                  >
                    <el-input
                      v-model="operationForm.equipmentName"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="设备编号"
                    style="width: 280px"
                    prop="equipmentNum"
                  >
                    <el-input
                      v-model="operationForm.equipmentNum"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="告警类型"
                    style="width: 280px"
                    prop="falutName"
                  >
                    <el-input
                      v-model="operationForm.falutName"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="告警时间"
                    style="width: 280px"
                    prop="warningTime"
                  >
                    <el-input
                      v-model="operationForm.warningTime"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>

                  <el-form-item
                    label="处置状态"
                    style="width: 280px"
                    prop="warningStatus"
                  >
                    <el-input
                      v-model="operationForm.warningStatus"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="跟进人"
                    style="width: 280px"
                    prop="empId"
                  >
                  <el-input
                      :disabled="true"
                      v-model="operationForm.empName"

                    ></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式" style="width: 280px">
                    <el-input
                      :disabled="true"
                      v-model="operationForm.empTel"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="eRight">
            <div class="title1">告警详细信息：</div>
            <div class="mesr">
              <div class="mesr2">
                <div class="opres">
                  <el-form
                    ref="operationForm"
                    :rules="rules"
                    label-width="80px"
                    size="mini"
                  >
                    <el-form-item
                      label="处理结果"
                      style="width: 280px; float: left"
                      prop="operationResult"
                    >
                      <el-input
                        v-model="operationForm.operationResult"
                        autocomplete="off"
                        :disabled="true"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="现场照片"
                      style="width: 280px; float: left"
                      prop="operationPhoto"
                    >
                      <el-input
                        v-model="operationForm.operationPhoto"
                        autocomplete="off"
                        :disabled="true"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="mright1">
                  <div class="xiangqing">
                    告警位置:{{ operationForm.equipmentPlace }}
                  </div>
                  <div class="xiangqing">
                    告警内容:{{ operationForm.warningName }}
                  </div>
                  <div class="xiangqing">
                    报警阈值:{{ operationForm.warningThr }}
                  </div>
                  <div class="xiangqing">
                    报警时间:{{ operationForm.warningTime }}
                  </div>
                  <div class="xiangqing">持续时间:{{operationForm.operationTime}}</div>
                  <div class="xiangqing">
                    告警等级:{{ operationForm.falutLevel }}
                  </div>
                </div>
                <div class="mright2">
                  <div class="xiangqing">
                    设备名称:{{ operationForm.equipmentName }}
                  </div>
                  <div class="xiangqing">
                    设备型号:{{ operationForm.equipmentModel }}
                  </div>
                  <div class="xiangqing">
                    设备编号:{{ operationForm.equipmentNum }}
                  </div>
                  <div class="xiangqing">
                    设备厂家:{{ operationForm.equipmentFactory }}
                  </div>
                  <div class="xiangqing">
                    出场时间:{{ operationForm.equipmentBirtime }}
                  </div>
                  <div class="xiangqing">
                    产品版本:{{ operationForm.equipmentVersion }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" style="text-align: center">
          <el-button @click="dialogShow = false">关闭</el-button>
        </div>
      </el-dialog>
    <!-- 处理模态框 -->
    <el-dialog
        :visible.sync="dialogTask"
        @close="closeDialogTask"
        fullscreen="true"
      >
        <div class="allDialog">
          <div class="eLeft">
            <div class="title1">告警处理分配：</div>
            <div class="mesl">
              <div class="mesl2">
                <el-form
                  ref="operationForm"
                  :rules="rules"
                  label-width="80px"
                  size="mini"
                >
                <el-form-item label="运维ID" hidden prop="operationId">
                    <el-input
                      v-model="operationForm.operationId"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="告警ID" hidden prop="warningId">
                    <el-input
                      v-model="operationForm.warningId"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="设备名称"
                    style="width: 280px"
                    prop="equipmentName"
                  >
                    <el-input
                      v-model="operationForm.equipmentName"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="设备编号"
                    style="width: 280px"
                    prop="equipmentNum"
                  >
                    <el-input
                      v-model="operationForm.equipmentNum"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="告警类型"
                    style="width: 280px"
                    prop="falutName"
                  >
                    <el-input
                      v-model="operationForm.falutName"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="告警时间"
                    style="width: 280px"
                    prop="warningTime"
                  >
                    <el-input
                      v-model="operationForm.warningTime"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>

                  <el-form-item
                    label="处置状态"
                    style="width: 280px"
                    prop="warningStatus"
                  >
                    <el-input
                      v-model="operationForm.warningStatus"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="跟进人"
                    style="width: 280px"
                    prop="empId"
                  >
                  <el-input
                      :disabled="true"
                      v-model="operationForm.empName"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式" style="width: 280px">
                    <el-input
                      :disabled="true"
                      v-model="operationForm.empTel"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="eRight">
            <div class="title1">告警详细信息：</div>
            <div class="mesr">
              <div class="mesr2">
                <div class="opres">
                  <el-form
                    ref="operationForm"
                    :rules="rules"
                    label-width="80px"
                    size="mini"
                  >
                    <el-form-item
                      label="处理结果"
                      style="width: 280px; float: left"
                      prop="operationResult"
                    >
                      <el-input
                        v-model="operationForm.operationResult"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="现场照片"
                      style="width: 280px; float: left"
                      prop="operationPhoto"
                    >
                      <el-input
                        v-model="operationForm.operationPhoto"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="mright1">
                  <div class="xiangqing">
                    告警位置:{{ operationForm.equipmentPlace }}
                  </div>
                  <div class="xiangqing">
                    告警内容:{{ operationForm.warningName }}
                  </div>
                  <div class="xiangqing">
                    报警阈值:{{ operationForm.warningThr }}
                  </div>
                  <div class="xiangqing">
                    报警时间:{{ operationForm.warningTime }}
                  </div>
                  <div class="xiangqing">持续时间:{{ newTime }}</div>
                  <div class="xiangqing">
                    告警等级:{{ operationForm.falutLevel }}
                  </div>
                </div>
                <div class="mright2">
                  <div class="xiangqing">
                    设备名称:{{ operationForm.equipmentName }}
                  </div>
                  <div class="xiangqing">
                    设备型号:{{ operationForm.equipmentModel }}
                  </div>
                  <div class="xiangqing">
                    设备编号:{{ operationForm.equipmentNum }}
                  </div>
                  <div class="xiangqing">
                    设备厂家:{{ operationForm.equipmentFactory }}
                  </div>
                  <div class="xiangqing">
                    出场时间:{{ operationForm.equipmentBirtime }}
                  </div>
                  <div class="xiangqing">
                    产品版本:{{ operationForm.equipmentVersion }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" style="text-align: center">
          <el-button @click="dialogTask = false">关闭</el-button>
          <el-button type="primary" @click="newUpdate()">确 定</el-button>
        </div>
      </el-dialog>
    <div class="divPage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryOperation.currentPage"
        :page-sizes="[4, 20, 50, 100]"
        :page-size="queryOperation.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

    <script>
export default {
  data() {
    return {
      sysAdmin: {},
      dialogShow: false,
      dialogTask: false,
      operationList: [],
      operationForm: [],
      queryOperation: {
        currentPage: 1, //当前页
        pageSize: 4, //每页显示的条数
        equipmentName: "",
        equipmentNum: "",
        repairTypeId: "",
      },
      repairTypes: [],
      page: {
        total: 0, //总条数
      },
    };
  },
  methods: {
    newLoadOperation(){
      this.queryOperation.currentPage=1;
      this.loadOperation();
    },
    newUpdate(){
      if(this.operationForm.warningStatus==="未派单"){
          this.operationForm.warningStatus=1;
        }else if(this.operationForm.warningStatus==="已派单"){
          this.operationForm.warningStatus=2;
        }else{
          this.operationForm.warningStatus=3;
        }
      this.update();
    },
    statesFormat(row, column) {

      if (row.operationStatus == 1) {
        return "未完成";
      } else if (row.operationStatus == 2) {
        return "巡检中";
      } else {
        return "已完成";
      }
    },
    queryByTel(id) {
      this.$axios.get("admins/" + id).then(res => {
        if (res.data.code == 200) {
          this.sysAdmin = res.data.data.sysAdmin;
          this.warningForm.empTel = this.sysAdmin.empTel;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },

    reLoadOperation() {
      this.queryOperation = this.$options.data().queryOperation;
      this.loadOperation();
    },
    loadOperation() {
      this.$axios
        .post("operations/queryAll", this.queryOperation)
        .then((res) => {
          if (res.data.code == 200) {
            this.operationList = res.data.data.operationList.list;
            this.page.total = res.data.data.operationList.total;
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
    loadRepairTypes() {
      this.$axios.get("operations/retypes").then((res) => {
        if (res.data.code == 200) {
          this.repairTypes = res.data.data.repairTypes;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //每页显示的条数变化时
    handleSizeChange(val) {
      this.queryOperation.pageSize = val;
      this.loadOperation();
    },
    // 当前页数变化时
    handleCurrentChange(val) {
      this.queryOperation.currentPage = val;
      this.loadOperation();
    },
    handleClick(id) {
        this.$axios.get("operations/" + id).then((res) => {
        this.dialogShow = true;
        this.operationForm = res.data.data.operation;
        if(res.data.data.operation.warningStatus==1){
          this.operationForm.warningStatus="未派单";
        }else if(res.data.data.operation.warningStatus==2){
          this.operationForm.warningStatus="已派单";
        }else{
          this.operationForm.warningStatus="已处理";
        }
      });
    },
    handleDelete(id) {
      this.$axios.delete("operations/" + id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.loadOperation();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleTask(id) {
      this.$axios.get("operations/" + id).then((res) => {
        this.dialogTask = true;
        this.operationForm = res.data.data.operation;
        if(res.data.data.operation.warningStatus==1){
          this.operationForm.warningStatus="未派单";
        }else if(res.data.data.operation.warningStatus==2){
          this.operationForm.warningStatus="已派单";
        }else{
          this.operationForm.warningStatus="已处理";
        }
      });
    },
    topath(path) {
      this.$router.push(path);
    },
    update() {
      this.$axios.post("operations/dispose", this.operationForm).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("处理成功");
          this.dialogTask = false; //关于dialog
          this.$refs.operationForm.resetFields(); //重置form
          this.loadOperation();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },

  mounted() {
    this.loadOperation();
    this.loadRepairTypes();
  },
  props: ["runStates", "admins"],
};
</script>

